<template lang="pug">
  .page
    Row(:gutter="20")
      i-col(:md="12" :lg="8" :xl="6" :xxl="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 80px;padding-bottom: 10px;")
        infor-card(shadow :color="infor.color" :icon="infor.icon" :icon-size="24")
          count-to.font-24(:end="infor.count" count-class="count-style")
          p {{ infor.title }}
    Divider
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(span="6")
          span.label-txt.w80 员工姓名：
          .choose-saler
            Tooltip(placement="bottom" max-width="200" :disabled="!tipIsShow" theme="light")
              Input.input(v-model="dolderNames" type="text" readonly clearable @on-clear="salersClear")
              div(slot="content")
                .font-14 {{dolderNames}}
            .button(@click="chooseSaler") 选择
        Col.pr-20.mb-15(span="6")
          span.label-txt.w80 开始时间：
          DatePicker(type="date" placeholder="请选择" @on-change="startTimeChange")
        Col.pr-20.mb-15(span="6")
          span.label-txt.w80 结束时间：
          DatePicker(type="date" placeholder="请选择" @on-change="endTimeChange")
        Col.pr-20.mb-15(span="6")
          Button(type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="setThead" :data="listData" @on-selection-change="tableSelectChange")
        .pr-24.pl-24(slot="header")
          .pull-right.table-title-btns
            Button.mr-15(type="info" @click="exportBtn") 导出
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
    visibvleTreeList(ref="treeModal" :treeData="treeData" @on-change="getSalerId")
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'
import { Common } from '@/utils/common.js'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import Mixin from './DMtableHead.js'

export default {
  name: 'hrdc-dataStatistical',

  components: {
    InforCard,
    CountTo
  },

  data () {
    return {
      salerName: '',
      startTime: '',
      endTime: '',
      thead: ['selection', 'userName', 'customerCount', 'oTypeCount', 'aTypeCount', 'bTypeCount', 'cTypeCount', 'dTypeCount', 'toDeliveryCount', 'deliveriedCount', 'deliveriedAmt', 'signedAmt'],
      listData: [],
      selectedIds: [],
      loading: false,
      statsTotal: {},
      codeTotal: 0,
      PageIndex: 1,
      PageSize: 10
    }
  },
  mixins: [Mixin],

  computed: {
    setThead () {
      return this.getTableColumns(this.thead)
    },
    inforCardData () {
      return [
        { title: '本月合同目标', icon: 'md-person-add', count: this.statsTotal.monthlyPlanedAmt?this.statsTotal.monthlyPlanedAmt:0, color: '#2d8cf0' },
        { title: '本周合同目标', icon: 'md-locate', count: this.statsTotal.weeklyPlanedAmt?this.statsTotal.weeklyPlanedAmt:0, color: '#19be6b' },
        { title: '本月实际签约金额', icon: 'md-help-circle', count: this.statsTotal.monthlySignedAmt?this.statsTotal.monthlySignedAmt:0, color: '#ff9900' },
        { title: '本周实际签约金额', icon: 'md-share', count: this.statsTotal.weeklySignedAmt?this.statsTotal.weeklySignedAmt:0, color: '#ed3f14' },
        { title: '总客户数', icon: 'md-chatbubbles', count: this.statsTotal.customerCount?this.statsTotal.customerCount:0, color: '#E46CBB' },
        { title: 'O类客户数', icon: 'md-map', count: this.statsTotal.oTypeCount?this.statsTotal.oTypeCount:0, color: '#9A66E4' },
        { title: 'A类需求数', icon: 'md-map', count: this.statsTotal.aTypeCount?this.statsTotal.aTypeCount:0, color: '#9A66E4' },
        { title: 'B类需求数', icon: 'md-map', count: this.statsTotal.bTypeCount?this.statsTotal.bTypeCount:0, color: '#E46CBB' },
        { title: 'C类需求数', icon: 'md-map', count: this.statsTotal.cTypeCount?this.statsTotal.cTypeCount:0, color: '#ed3f14' },
        { title: 'D类需求数', icon: 'md-map', count: this.statsTotal.dTypeCount?this.statsTotal.dTypeCount:0, color: '#ff9900' },
        { title: '需交付需求数', icon: 'md-map', count: this.statsTotal.toDeliveryCount?this.statsTotal.toDeliveryCount:0, color: '#19be6b' },
        { title: '已交付需求数', icon: 'md-map', count: this.statsTotal.deliveriedCount?this.statsTotal.deliveriedCount:0, color: '#2d8cf0' }
      ]
    }
  },

  created () {
    this.getStatsTotal()
    this.getStatsDetails()
  },

  methods: {
    // 导出
    exportBtn () {
      HRDCCustomerApi.ExportStatsDetails({
        SelectedIds: this.selectedIds,
        SalerName: this.salerName,
        HolderIds: this.salesIds,
        StartTime: this.startTime,
        EndTime: this.endTime
      }).then(res => {
        let objectUrl = res.data.message
        console.log(objectUrl)
        const link = document.createElement('a')
        link.download = ''
        link.href = objectUrl
        link.click()
      })
    },
    // 获取统计汇总
    getStatsTotal () {
      HRDCCustomerApi.GetStatsTotal({
        SalerName: '',
        StartTime: '',
        EndTime: ''
      }).then(res => {
        this.statsTotal = res.data.data
      })
    },
    // 获取统计明细
    getStatsDetails () {
      HRDCCustomerApi.GetStatsDetails({
        SalerName: this.salerName,
        StartTime: this.startTime,
        HolderIds: this.salesIds,
        EndTime: this.endTime,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        this.listData = res.data.data
        this.codeTotal = res.data.totalRows
      })
    },
    searchBtn () {
      this.PageIndex = 1
      this.getStatsDetails()
    },
    tableSelectChange (val) {
      this.selectedIds = val.map(item => {
        return item.userId
      })
    },
    pageChangeFn (val) {
      this.PageIndex = val
      this.getStatsDetails()
    },
    onpageSizeChange (val) {
      this.PageSize = val
      this.getStatsDetails()
    },
    startTimeChange (val) {
      if (val) {
        this.startTime = val
      } else {
        this.startTime = ''
      }
    },
    endTimeChange (val) {
      if (val) {
        this.endTime = val
      } else {
        this.endTime = ''
      }
    }
  }
}
</script>

<style lang="less">

</style>
